/*
 * @Author: jiu yin
 * @Date: 2024-05-06 16:24:06
 * @LastEditTime: 2024-07-03 18:34:10
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\home\index.tsx
 * jiu
 */
import { useEffect, useState } from "react";

import "./index.scss";

import homeIcon1 from "@/assets/image/homeIcon1.png";
import homeIcon2 from "@/assets/image/homeIcon2.png";

import DataOverview from "./component/DataOverview";
import { basic_information } from "@/api/home";
import { useRoute } from "@/hooks";

export default function index() {
	const { push } = useRoute();

	let [info_data, setInfo_data] = useState<any>({});

	useEffect(() => {
		basic_information().then((res: any) => {
			setInfo_data(res.data);
		});
	}, []);

	const scale_fn = (num: number) => {
		switch (num) {
			case 1:
				return "小";
			case 2:
				return "中";
			case 3:
				return "大";

			default:
				break;
		}
	};

	let fastArr = [
		{
			name: "场景播控",
			auxiliary: "快速查看场景状态",
			path: "/scene_studio/scene_studio",
		},
		{
			name: "扫码出票",
			auxiliary: "一键开启扫码枪",
			path: "/ticket_order/ticket_order?barcode=open",
		},
		{
			name: "设备管理",
			auxiliary: "管理MR设备",
			path: "/pico/pico",
		},
		{
			name: "查看订单",
			auxiliary: "快捷查看今日订单",
			path: "/ticket_order/ticket_order",
		},
	];

	return (
		<div className="base_bg_fff ">
			{/* 我的场所： */}
			<section>
				<div className="text-20px font-700 flex items-center">
					<img src={homeIcon1} alt="" className="w-28px h-28px" />
					<span className="c-#161940 ml-10px">我的场所：</span>
					<span className="c-#5864FF">			{info_data.place_name}</span>
				</div>

				<div className="grid grid-cols-3 gap-20px mt-20px">
					<div className="homeBg1 h-215px box-border pt-24px pl-20px">
						<div className="flex items-center text-18px font-700 c-#fff">
							<i className="homeBgIcon1 w-22px h-22px mr-16px"></i>基础信息
						</div>
						<div className="mt-16px">
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">场所名称:</span>
								{info_data.place_name}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">场所ID:</span>
								{info_data.place_id}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">创建时间:</span>
								{info_data.created_at}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">规模:</span>
								{scale_fn(info_data.scale)}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">地区:</span>
								{info_data.place_address}
							</p>
						</div>
					</div>

					<div className="homeBg2 h-215px box-border pt-24px pl-20px">
						<div className="flex items-center text-18px font-700 c-#fff">
							<i className="homeBgIcon2 w-22px h-22px mr-16px"></i>公会信息
						</div>
						<div className="mt-16px">
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">公会:</span> {info_data.association_name}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">代理:</span> {info_data.agent_name}
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">组织:</span> {info_data.organization_name}
							</p>
						</div>
					</div>

					<div className="homeBg3 h-215px box-border pt-24px pl-20px">
						<div className="flex items-center text-18px font-700 c-#fff">
							<i className="homeBgIcon3 w-22px h-22px mr-16px"></i>经营信息
						</div>
						<div className="mt-16px">
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">门票定价:</span> {info_data.place_price} 元/人
							</p>
							<p className="flex c-#fff font-700 mb-2px">
								<span className="mr-10px w-60px font-400">场所分成:</span> {info_data.profit_ratio} %
							</p>
						</div>
					</div>
				</div>
			</section>
			{/*快捷操作  */}
			<section>
				<div className="text-20px font-700 flex items-center">
					<img src={homeIcon2} alt="" className="w-28px h-28px" />
					<span className="c-#161940 ml-10px">快捷操作</span>
				</div>
				<ul className="grid grid-cols-4 gap-20px mt-10px">
					{fastArr.map((item: any, index: number) => (
						<li className={`homeFast${index + 1} h-160px cursor-pointer`} key={index} onClick={()=>push(item.path)}>
							<div className="c-#161940 ml-50% mt-40px">
								<p className="text-16px font-700">{item.name}</p>
								<p className="text-14px mt-6px">{item.auxiliary}</p>
							</div>
						</li>
					))}
				</ul>
			</section>
			{/*数据概览  */}
			<DataOverview></DataOverview>
		</div>
	);
}
